<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        var login = {
            template: '<h2>这是登录子组件</h2>'
        }
        var register = {
            template: '<h2>这是注册子组件</h2>'
        }
        var router = new VueRouter({
            routes:[
                { path: '/',redirect: '/login'},
                { path: '/login',component: login},
                { path: '/register',component: register}
            ]
        });
        var vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: '',
                fullname: ''
            },
            methods: {},
            // router: router
            router,
            watch: {
                // this.$route.path
                '$route.path' : function(newVal,oldVal){
                    //console.log(newVal+'-----'+oldVal);
                    if(newVal === '/login'){
                        console.log('欢迎进入登录页面');
                    }else if(newVal === '/register'){
                        console.log('欢迎进入注册页面');
                    }
                }
            }
        });
    </script>
</body>
</html>